<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/indexBase.css">
</head>
<body>


<div class="head">
    <div class="search">
        <label>
            <input type="text" placeholder="请输入内容🔍">

        </label>

    </div>
    <div class="nav">
        <div class="tiny">
            <button>推荐</button>
            <hr>
        </div>
        <div class="tiny">
            <button>食品</button>
            <hr>
        </div>
        <div class="tiny">
            <button>男装</button>
            <hr>
        </div>
        <div class="tiny">
            <button>百货</button>
            <hr>
        </div>
        <div class="tiny">
            <button>鞋包</button>
            <hr>
        </div>
        <div class="tiny">
            <button>水果</button>
            <hr>
        </div>
        <div class="tiny">
            <button>手机</button>
            <hr>
        </div>
    </div>
</div>
<div class="layout">


    <!-- 轮播图 -->
    <div class="banner">
        <ul class="clearfix bannerImg">
            <li><a href="#"><img src="img/IndexImage/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/6.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/7.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/IndexImage/8.jpg" alt=""/></a></li>
        </ul>
        <ul class="bannerIndicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 导航栏 -->
    <nav class="nav">
        <ul class="clearfix">
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10001.png" alt=""/>
                    <p>富贵超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10002.png" alt=""/>
                    <p>富贵电器</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10003.png" alt=""/>
                    <p>服装美妆</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10004.png" alt=""/>
                    <p>富贵生鲜</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10005.png" alt=""/>
                    <p>富贵到家</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10006.png" alt=""/>
                    <p>充值手机</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10007.png" alt=""/>
                    <p>附近好店</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10008.png" alt=""/>
                    <p>FLOWER会员</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10009.png" alt=""/>
                    <p>富贵国际</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/IndexImage/icon/10010.png" alt=""/>
                    <p>富贵拍卖</p>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 商品区 -->
    <main class="product">
        <!-- 秒杀区块 -->
        <section class="product_box sk clearfix">
            <!-- 头部内容 -->
            <div class="product_box_tit">
                <div class="f_left ml">
                    <!-- 秒杀文字 -->
                    <span class="sk_name ">富贵秒杀</span>
                    <!-- 秒杀时间 -->
                    <div class="sk_time m_l10">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="f_right m_r10 更多"><a href="#">></a></div>
            </div>
            <!-- 主体内容 -->
            <div class="product_box_con">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10022.jpg" alt=""/></a>
                        <p>&yen;28.5</p>

                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10023.png" alt=""/></a>
                        <p>&yen;29.8</p>

                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10024.jpg" alt=""/></a>
                        <p>&yen;32.00</p>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10025.jpg" alt=""/></a>
                        <p>&yen;62.00</p>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10026.jpg" alt=""/></a>
                        <p>&yen;40.00</p>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/IndexImage/限时抢购/10027.png" alt=""/></a>
                        <p>&yen;15.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 产品区块1 -->
        <section class="product_box">
            <!-- 头部内容 -->
            <div class="product_box_tit"><h3>优惠活动</h3></div>
            <!-- 主体内容 -->
            <div class="product_box_con clearfix">
                <a href="javascript:;" class="f_left w_50 b_right"><img src="img/IndexImage/cp1.jpg" alt=""/></a>
                <a href="javascript:;" class="f_right w_50 b_bottom"><img src="img/IndexImage/cp2.jpg" alt=""/></a>
                <a href="javascript:;" class="f_right w_50"><img src="img/IndexImage/cp3.jpg" alt=""/></a>
            </div>
        </section>
        <!-- 产品区块2 -->
        <section class="product_box">
            <!-- 头部内容 -->
            <div class="product_box_tit"><h3>富贵超市</h3></div>
            <!-- 主体内容 -->
            <div class="product_box_con clearfix">
                <a href="javascript:" class="f_right w_50 b_left"><img src="img/IndexImage/cp4.jpg" alt=""/></a>
                <a href="javascript:" class="f_left w_50 b_bottom"><img src="img/IndexImage/cp5.jpg" alt=""/></a>
                <a href="javascript:" class="f_left w_50"><img src="img/IndexImage/cp6.jpg" alt=""/></a>
            </div>
        </section>
    </main>
</div>

<div class="tip">
    <p>©吴诗洁&李仕森|朱铭俊&张潮涛 粤ICP备******aib号</p>
</div>

<div class="footer">
    <div class="footer-body">
        <a href="#" class="tiny">
            <img src="img/home.png">
            <h5 id="first">首页</h5>
        </a>
        <a href="list.html" class="tiny">
            <img src="img/list.png" alt="">
            <h5>购物列表</h5>
        </a>
        <a href="#" class="tiny">
            <img src="img/mine.png" alt="">
            <h5>我的</h5>
        </a>
    </div>

</div>
<!-- 引入js文件 -->
<script src="js/index.js"></script>
</body>
</html>